<template>
	<div class="login-container">
		<canvas id="bg"></canvas>
		<div class="login-form">
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
				<div class="login-title">{{ $t('app.title') }}</div>
				<el-form-item prop="account">
					<el-input v-model="loginForm.account" :prefix-icon="User"
						:placeholder="$t('app.username')"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" :prefix-icon="Lock" show-password
						:placeholder="$t('app.password')"></el-input>
				</el-form-item>
				<el-form-item prop="captcha" class="login-captcha">
					<el-input v-model="loginForm.captcha" :placeholder="$t('app.captcha')"
						:prefix-icon="Key"></el-input>
					<img :src="captchaImg" @click="refreshCaptcha"/>
				</el-form-item>
				<el-form-item class="login-button">
					<el-button type="primary" @click="onLogin()">{{ $t('app.signIn') }}</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { bgUtils } from '@/utils/tool'

const router = useRouter()
const { t } = useI18n()
const loginFormRef: any = ref(null)

const loginForm = ref({
	account: 'admin',
	password: 'admin',
	captcha: 'UMTA8'
})

const loginRules = ref({
	account: [{ required: true, message: t('required'), trigger: 'blur' }],
	password: [{ required: true, message: t('required'), trigger: 'blur' }],
	captcha: [{ required: true, message: t('required'), trigger: 'blur' }]
})

const onLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		// 用户登录
		store.userStore.loginAction(loginForm.value).then(() => {
			router.push({ path: '/home' })
		})
	})
}

nextTick(() => {
	bgUtils();
});

const captchaImg = ref();

onMounted(() => {
	refreshCaptcha();
});
/**
 * 重置验证码
 */
const refreshCaptcha = () => {
	captchaImg.value = import.meta.env.VITE_API_URL as any + '/captcha.jpg?t=' + new Date().getTime();
}
</script>

<style lang="scss" scoped>
.login-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 100vh;
	position: relative;
}

.login-form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	flex: 0 1 auto;
	padding: 40px;
	border-radius: 6px;
	box-shadow: 1px 1px 8px #aaa6a6;
	box-sizing: border-box;

	:deep(.el-input) {
		height: 45px;
		margin-top: 5px;

		.el-input__inner {
			padding: 10px 15px 10px 5px;
			height: 45px;
			line-height: 45px;
			color: #666;
			font-size: 16px;
		}
	}
}

.login-title {
	display: flex;
	justify-content: center;
	margin-bottom: 35px;
	font-size: 24px;
	color: #444;
	letter-spacing: 4px;
}

.login-captcha {
	:deep(.el-input) {
		width: 200px;
	}
}

.login-captcha img {
	width: 150px;
	height: 40px;
	margin: 5px 0 0 10px;
	cursor: pointer;
}

.login-button {
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100%;
		height: 45px;
		font-size: 18px;
		letter-spacing: 8px;
	}
}

@media only screen and (max-width: 992px) {
	.login-intro {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.login-container {
		background: #fff;
	}

	.login-intro {
		display: none;
	}

	.login-form {
		flex: 0 1 auto;
		border-radius: 0;
		box-shadow: none;
	}

	.login-captcha {
		:deep(.el-input) {
			width: 150px;
		}
	}
}
</style>
